<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <el-page-header  icon="el-icon-d-arrow-left" title="返回" @click="goBack"> </el-page-header>


        <el-row>
          <el-col :span="24">
            <router-link :to="{name:'CustomerInfo', params:{id: this.customerId}}">
              <el-button class="my_button" icon="el-icon-message" type="info">客户信息</el-button>
            </router-link>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <router-link :to="{name:'NotAnalyRecord', params:{id: this.customerId}}">
              <el-button
                  class="my_button" icon="el-icon-data-line" type="info">未分析记录</el-button>
            </router-link>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <router-link :to="{name:'HistoryRecord', params:{id: this.customerId}}">
              <el-button
                  class="my_button" icon="el-icon-timer" type="info">历史记录</el-button>
            </router-link>
          </el-col>
        </el-row>

      </el-aside>

      <el-main>

      <div class="content">
        <el-row>
          <el-col :span="24" v-if="changeSwitch === 0">
            <div class="operate_button">
              <el-button
                  type="primary"
                  style="margin-right: 50px"
                  @click="selectAnalyVisible = true"
              >
                再次分析
              </el-button>
              <el-button
                  type="text"
                  @click="changeSwitch=1"
              >
                批量操作
              </el-button>
            </div>
          </el-col>

          <el-col :span="24" v-if="changeSwitch === 1">
            <div class="operate_button">
              <el-button
                  type="primary"
                  style="margin-right: 10px"
                  @click="changeSwitch=0"
              >
                返回
              </el-button>
              <el-button
                  type="primary"
                  style="margin-right: 10px"
                  @click="selectAnalyVisible = true"
              >
                立即分析
              </el-button>
              <el-button
                  type="primary"
                  @click="deleteRecordBatch"
              >
                删除
              </el-button>
            </div>
          </el-col>
        </el-row>

        <el-table
            :data="notAnaRecords"
            style="width: 100%"
            :header-cell-style="headClass"
            :cell-style="rowClass"
            @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />

          <el-table-column label="图片" prop="pretreatedImgList">
            <template #default="scope">
              <el-image
                  v-for="pretreatedImg in scope.row.pretreatedImgList"
                  :key="pretreatedImg.id"
                  style="width: 100px; height: 100px"
                  :src="pretreatedImg.url"
                  :preview-src-list="[pretreatedImg.url]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="日期" prop="analyzeTime">
            <template #default="scope">
              {{calcDate(scope.row.analyzeTime)}}
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template #header>
              操作
            </template>
            <template #default="scope">
              <el-button @click="addToSelectedRecordId(scope.row.reportId)" type="primary">
                分析
              </el-button>
              <el-button
                  icon="el-icon-delete"
                  @click="deleteRecord(scope.row.reportId)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

        <el-dialog title="" v-model="selectAnalyVisible" width="80%">
          <div class="image_container">
            <div>
              <i class="el-icon-tickets my_icon1"></i><span class="my_analysis_p1">性格分析报告</span>
              <el-divider></el-divider>
            </div>
            <div class="my_color">
              <i class="el-icon-data-analysis my_icon1  my_color"></i><span class="my_analysis_p5">报告展示</span>
              <el-divider style="width: 25%;"></el-divider>
            </div>
            <div>
              <el-checkbox v-model="checked1" label="笔迹特征" border></el-checkbox>
              <el-checkbox v-model="checked2" label="性格分析" border></el-checkbox>
              <el-checkbox v-model="checked3" label="卡式测定" border></el-checkbox>
              <el-checkbox v-model="checked4" label="职业建议" border></el-checkbox>
            </div>
            <div class="my_color" style="margin-top: 30px">
              <i class="el-icon-data-line my_icon1  my_color"></i><span class="my_analysis_p5">分析算法</span>
              <el-divider style="width: 25%;"></el-divider>
            </div>
            <div style="margin-bottom: 20px">
              <el-select v-model="selectedAnaId" placeholder="请选择合适的分析算法">
                <el-option
                    v-for="anaId in anaIds"
                    :key="anaId.value"
                    :label="anaId.label"
                    :value="anaId.value"
                >
                </el-option>
              </el-select>
              <br/>

              <el-button class="my_button" type="info" @click="selectAnalyVisible = false">
                取消
              </el-button>
              <el-button class="my_button" type="primary" @click="batchAnalyRecord">
                开始分析
              </el-button>
            </div>

          </div>
        </el-dialog>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import customer from "@/api/customer/customer";

export default {
  name: "NotAnalyRecord",
  data() {
    return {
      userId: null,
      status: 1,
      changeSwitch: 0,
      search: '',
      customerId: null,
      fit: 'fill',
      notAnaRecords: null,
      selectAnalyVisible: false,
      selectedAnaId: null,
      // 选中记录信息
      multipleSelection: [],
      // 选中记录编号
      recordIdSelected: [],
      anaIds: [
        {
          value: '1',
          label: '分析算法',
        },
        {
          value: '2',
          label: '分析算法2',
        }
      ],
    }
  },
  created() {
    // 如果路由中有参数值则执行此方法
    if(this.$route.params && this.$route.params.id) {
      // 从路由中获取id值
      this.customerId = this.$route.params.id
    }
    this.getNotAnaRecord();
  },
  watch: {  // 监听(解决路由切换问题)
    // 路由变化方式，路由发生变化即执行
    $route(to, from){
      // this.getCustomerInformation();
    }
  },
  methods: {
    // 表头居中显示
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    goBack() {
      this.$router.replace('/customer/list')
    },
    // 批量删除记录
    deleteRecordBatch() {
      this.$confirm('此操作将删除记录,是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let array = [];
        for (let i = 0; i < this.recordIdSelected.length; i++) {
          let id = {};
          id.id = this.recordIdSelected[i];
          array[i] = id;
        }
        array = {array};
        customer.deleteRecordBatch(array).then(response => {
          this.getNotAnaRecord()
          this.$message({
            type: 'success',
            message: '删除成功',
          })
          return response;
        }).catch((response) => {
          console.log("error:" + response)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    deleteRecord(selectedId) {
      this.$confirm('此操作将删除该记录,是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let array = [];
        let id = {};
        id.id = selectedId;
        array[0] = id;
        array = {array};
        customer.deleteRecordBatch(array).then(response => {
          this.getNotAnaRecord()
          this.$message({
            type: 'success',
            message: '删除成功',
          })
          return response;
        }).catch((response) => {
          console.log("error:" + response)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val

      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.recordIdSelected[i] = this.multipleSelection[i].reportId
      }
    },
    getNotAnaRecord() {
      customer.getNotAnaRecord(this.customerId, this.status)
          .then((response) => {
            this.notAnaRecords = response.data.item.reportHistoryList;
            console.log(response)
          }).catch(error => {
        console.log(error);
        this.$message( {
          type: 'error'
        })
      })
    },
    // 分析记录
    batchAnalyRecord() {
      this.$confirm('此操作将分析未分析客户记录，是否继续？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {

        console.log("进入了方法")
        console.log(this.recordIdSelected)
        let array = [];
        for (let i = 0; i < this.recordIdSelected.length; i++) {
          let id = {};
          id.id = this.recordIdSelected[i];
          array[i] = id;
        }

        array = {array}

        console.log(array)
        customer.batchAnalyRecord(array,this.selectedAnaId).then(response => {
          var list = JSON.stringify(response.data.list)
          this.$router.push({name: 'BatchAnalysis',params:{'list': list}});
        })

        this.recordIdSelected = []
      })
    },
    //
    addToSelectedRecordId(id) {
      this.recordIdSelected[0] = id;
      this.selectAnalyVisible = true
    },
    // 计算日期
    calcDate(timeStr){
      timeStr =timeStr.substring(0,16);
      return timeStr;
    },
  },

}
</script>

<style scoped>
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  width: 250px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.handle-box {
  margin: 20px 50px;
  /*border-style: dashed;*/
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 120px;
  display: inline-block;
  margin: 10px 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}
.my_table{
  margin: 0px 30px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.container {
  margin: 20px 400px;
}
.el-input {
  width: 180px;
}
#input-textarea {
  width: 300px;
}

#reset-btn {
  margin-right: 25px;
}
.important {
  color: red;
}

.content {
  border-style: outset;
}
.information {
  border-style: outset;
}
.description {
  border-style: outset;
}
.title {
  font-size: 30px;
  margin: 5px 500px;
}
.my_button{
  margin: 5px 30px;
  width: 180px;
  font-size: 16px
}
.operate_button {
  margin-left: 850px;
}
.first-title {
  font-size: 24px;
  color: black;
}
.second-title {
  font-size: 20px;
  color: red;
  text-align:center;
}

.export {
  text-align: center;
}

.footer-button {
  margin: 5px 600px;
}
</style>